<template>
  <div class="calendar_warp">
    <template v-if="isShow">
      <ul class="m1">
        <li
          v-for="(item, index) in HSingleDigits"
          :key="item"
          class="item"
          :class="{ active: index == currentHSIndex }"
        >
          <span></span>
          {{ item }}
        </li>
      </ul>
      <ul class="m2">
        <li
          v-for="(item, index) in HTenDigits"
          :key="item"
          class="item"
          :class="{ active: index == currentHTIndex }"
        >
          <span></span>
          {{ item }}
        </li>
      </ul>
      <div class="text">
        时
      </div>
      <ul class="m1">
        <li
          v-for="(item, index) in MTenDigits"
          :key="item"
          class="item"
          :class="{ active: index == currentTIndex }"
        >
          <span></span>
          {{ item }}
        </li>
      </ul>
      <ul class="m2">
        <li
          v-for="(item, index) in MSingleDigits"
          :key="item"
          class="item"
          :class="{ active: index == currentSIndex }"
        >
          <span></span>
          {{ item }}
        </li>
      </ul>
      <div class="text">
        分
      </div>
      <ul class="m">
        <li
          v-for="(item, index) in currenM"
          :key="item"
          class="item"
          :class="{ active: index == currentMIndex }"
        >
          <span></span>
          {{ item }}
        </li>
      </ul>
      <ul>
        <!-- <li class="item">  <span></span> 9</li> -->
        <li
          v-for="(item, index) in currentTime"
          :key="item"
          class="item"
          :class="{ active: currentIndex == index }"
        >
          <span></span>
          {{ item }}
        </li>
      </ul>
      <div class="text">
        秒
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    time: {
      type: String,
      default: '00:00:00'
    }
  },
  data() {
    return {
      arr: [0, 1],
      currentTime: [9, 0, 1, 2, 3, 4, 5, 6, 7, 8], // 秒的个位数
      currentIndex: -1,
      currenM: [0, 1, 2, 3, 4, 5], // 秒的十位数
      currentMIndex: -1,
      countDowntimer: null,
      isFirt: true,
      //   分钟
      MSingleDigits: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 分钟的个位数
      MTenDigits: [0, 1, 2, 3, 4, 5], // 分钟的十位数
      isMSingleDigitsFirst: true,
      isMTenDigitsFirst: true,
      currentSIndex: -1,
      currentTIndex: -1,
      //   时钟
      HSingleDigits: [0, 1, 2], // 时 十位数
      HTenDigits: [0, 1, 2, 3, 4], // 时  个位数
      isHSingleDigitsFirst: true,
      isHTenDigitsFirst: true,
      currentHSIndex: -1, // // 时 十位数
      currentHTIndex: -1,
      isShow: true
    };
  },
  mounted() {
    this.isShow = this.visible;
    let time = this.time;
    let timeArr = time.split(':');
    let timeA = [];
    timeArr.forEach(i => {
      let arr = i.split('');
      timeA = [...timeA, ...arr];
    });
    let hT = timeA[0];
    let hS = timeA[1];
    let mT = timeA[2];
    let mS = timeA[3];
    let sT = timeA[4];
    let sS = timeA[5];
    let S = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    let T = [0, 1, 2, 3, 4, 5];
    let H1 = [0, 1, 2];
    this.currentTime = this.arrInit(S, sS);
    this.currenM = this.arrInit(T, sT);
    this.MSingleDigits = this.arrInit(S, mS);
    this.MTenDigits = this.arrInit(T, mT);
    this.HSingleDigits = this.arrInit(H1, hT);
    this.HTenDigits = this.arrInit(S, hS);
    setTimeout(() => {
      this.currentIndex = 9;
      this.countDown();
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.countDowntimer);
  },
  methods: {
    arrInit(arr, i) {
      let index = Number(i);
      let s = arr.slice(0, index + 1);
      let e = arr.slice(index + 1);
      return [...e, ...s];
    },
    countDown() {
      this.countDowntimer = setTimeout(() => {
        this.currentTime.unshift(this.currentTime[9]);
        this.currentTime.length = 10;
        if (this.currentTime[this.currentIndex] == 0) {
          if (this.isFirt) {
            this.isFirt = false;
            this.currentMIndex = 5;
          } else {
            this.currenM.unshift(this.currenM[5]);
            this.currenM.length = 6;
          }
        }
        if (
          this.currentTime[this.currentIndex] == 0 &&
          this.currenM[this.currentMIndex] == 0
        ) {
          if (this.isMSingleDigitsFirst) {
            this.isMSingleDigitsFirst = false;
            this.currentSIndex = 9;
          } else {
            this.MSingleDigits.unshift(this.MSingleDigits[9]);
            this.MSingleDigits.length = 10;
          }
        }
        if (
          this.MSingleDigits[9] == 0 &&
          this.currentTime[this.currentIndex] == 0 &&
          this.currenM[this.currentMIndex] == 0
        ) {
          if (this.isMTenDigitsFirst) {
            this.isMTenDigitsFirst = false;
            this.currentTIndex = 5;
          } else {
            this.MTenDigits.unshift(this.MTenDigits[5]);
            this.MTenDigits.length = 6;
          }
        }

        if (
          this.MSingleDigits[this.MSingleDigits.length - 1] == 0 &&
          this.currentTime[this.currentIndex] == 0 &&
          this.currenM[this.currentMIndex] == 0 &&
          this.MTenDigits[this.MTenDigits.length - 1] == 0
        ) {
          if (this.isHTenDigitsFirst) {
            this.currentHTIndex = 9;
            this.isHTenDigitsFirst = false;
          } else {
            this.HTenDigits.unshift(
              this.HTenDigits[this.HTenDigits.length - 1]
            );
            this.HTenDigits.length = 9;
            if (this.HTenDigits.length > 6) {
              this.HTenDigits.unshift(
                this.HTenDigits[this.HTenDigits.length - 1]
              );
              this.HTenDigits.length = 9;
            } else {
              this.HTenDigits.unshift(this.HTenDigits[5]);
              this.HTenDigits.length = 5;
              if (this.HTenDigits[5] == 0) {
                this.HTenDigits = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
                this.currentHTIndex = 9;
                this.HTenDigits.length = 10;
              }
            }
          }
        }
        // 时  十位数的切换
        if (
          this.MSingleDigits[this.MSingleDigits.length - 1] == 0 &&
          this.currentTime[this.currentIndex] == 0 &&
          this.currenM[this.currentMIndex] == 0 &&
          this.MTenDigits[this.MTenDigits.length - 1] == 0 &&
          this.HTenDigits[this.HTenDigits.length - 1] == 0
        ) {
          if (this.isHSingleDigitsFirst) {
            this.currentHSIndex = 2;
            this.isHSingleDigitsFirst = false;
          } else {
            this.HSingleDigits.unshift(
              this.HSingleDigits[this.HSingleDigits.length - 1]
            );
            this.HSingleDigits.length = 3;
          }
        }
        if (
          this.MSingleDigits[this.MSingleDigits.length - 1] == 0 &&
          this.currentTime[this.currentIndex] == 0 &&
          this.currenM[this.currentMIndex] == 0 &&
          this.MTenDigits[this.MTenDigits.length - 1] == 0 &&
          this.HTenDigits[this.HTenDigits.length - 1] == 0 &&
          this.HSingleDigits[this.HSingleDigits.length - 1] == 0
        ) {
          this.isShow = false;
          this.$emit('update:visible', false);
          clearInterval(this.countDowntimer);
        } else {
          this.countDown();
        }
      }, 1000);
    }
  }
};
</script>

<style scoped>
.calendar_warp {
  display: flex;
  align-items: center;
  padding-left: 10px;
  justify-content: flex-end;
}
.text {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  margin-right: 5px;
  padding-top: 4px;
}
ul {
  height: 26px;
  /* overflow: hidden; */
  position: relative;
  width: 18px;
  padding: 0;
  margin-right: 5px;
}
.item {
  list-style: none;
  width: 18px;
  height: 26px;
  position: absolute;
  background-color: #ffffff;
}
li {
  opacity: 1;
  transform: rotateX(0deg);
  transform-origin: top;
  /* transition-property: transform, opacity;
  transition-delay: 0.9s, 0;
  transition-timing-function: ease;
  transition-duration: 1s, 1s; */
  /* transition:transform 1s ease 0.9s,opacity 1s ease 0; */
  font-size: 20px;
  font-weight: 500;
  color: #ff000c;
  border-radius: 2px;
  text-align: center;
  line-height: 25px;
}
li.active {
  /* transform: rotateX(270deg); */
  transform: rotateX(90deg);
}
li span {
  display: block;
  width: 18px;
  height: 4px;
  background-color: #ff000c;
}
</style>
